<template>
	<view>
		<uni-nav-bar 
		statusBar="true" 
		:fixed="true" 
		:border="false"
		 :leftIcons="true"
		backgroundColor="#1D7DFF"
		leftIcon="back"
		@click-left="back"
		color="#ffffff">
			<view class="index-top-nav-title">
				<view class="">{{i18n.service}}</view>
				<!-- <text @tap.stop="jumpList" class="iconfonts">{{i18n.bili}}</text> -->
			</view>
		</uni-nav-bar>
		<view class="service-content">
			<view class="service-content-title">
				<text>{{i18n.service_lg01}}</text>
				<image :src="info.code_img" mode=""></image>
				<text>{{i18n.service_lg02}}</text>
			</view>
			<view class="service-content-c">
				<text>
					{{i18n.service_lg03}} :
				</text>
				<text hover-class="active" class="">
					{{info.kefuweixin}}
				</text>
				<view hover-class="active" @tap.stop="copy">{{i18n.service_lg04}}</view>
			</view>
			<view class="saveImage" @tap.stop="save">
				{{i18n.service_lg05}}
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Toast from '@/components/toast/toast.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js';
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
				showLoad:false,
				info:{},
				isfast:false
			}
		},
		onShow() {
			this.getMessage()
		},
		computed:{
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			Toast,uniNavBar,Load
		},
		methods:{
			copy(){
				if (this.isfast) return;
				this.isfast = true;
				setTimeout(()=> {
					this.isfast = false;
				}, 1500)
				let  _this = this;
				uni.setClipboardData({
					data: this.info.kefuweixin,
					success: function () {
						uni.showModal({
							title: _this.i18n.copy_success,
							content:  _this.i18n.copy_success_message, 
							showCancel:false,
							success: function(res) {
								if (res.confirm) {											 
									//console.log('用户点击确定');
								} else if (res.cancel) {
									//console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			save () {
				// #ifdef APP-PLUS
				var pages = getCurrentPages();  
			    var page = pages[pages.length - 1];
			    var bitmap=null;  
				// 获得当前webview对象
			    var currentWebview = page.$getAppWebview();
				// 要绘制的图片对象
			    bitmap = new plus.nativeObj.Bitmap('amway_img');  
			    // 将webview内容绘制到Bitmap对象中  
			    currentWebview.draw(
					bitmap,
					// 成功的回调函数
					function(){
						bitmap.save(
						// 要保存的图片路径 相对路径URL(RelativeURL) - 以"_"开头的相对路径
						// 因为内容可能改变 所以使用随机数作为文件的名字
						"_doc/"+Math.random()+".jpg"  
						// 可设置保存图片的格式，压缩质量等参数。
						,{}  
						,function(i){
							uni.saveImageToPhotosAlbum({  
								filePath: i.target,  
								success: function () {  
									bitmap.clear(); //销毁Bitmap图片  
									uni.showToast({  
										title: '保存图片成功',  
										duration: 1500,
										icon: "none"
									});  
								}  
							});  
						}  
						,function(e){
							uni.showToast({  
								title: '保存图片失败',  
								duration: 1500,
								icon: "none"
							});
						});  
					},
					// 失败的回调函数
					function(e){
						uni.showToast({  
							title: '保存图片失败',
							duration: 1500,
							icon: "none"
						});
					}
				);
				// #endif
			},
			getMessage(){
				let url = this.getRequestUrl + '/api/User/kefu';
				this.showLoad=true;
				let _data = {}
				fetch(url,_data,"POST").then(res=>{
					this.showLoad=false;
					if(res.data.code){
						this.info = res.data.data
					}
				}).catch(error=>{
					this.showLoad=false;
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
	
</script>
<style>
	page{
		background-color:#f5f5f5 ;
	}
</style>
<style lang="scss" scoped>
	.index-top-nav-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		view{
			font-size:36upx;
			font-weight: bold;
		}
		text{
			font-size:26upx;
			font-weight: 100;
		}
	}
	.service-content{
		margin: 30upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 60upx 30upx 60upx 30upx;
		.service-content-title{
			width: 400upx;
			margin: 0 auto;
			text-align: center;
			// border-bottom: 2upx solid #D1D1D1;
			padding-bottom: 60upx;
			image{
				width: 200upx;
				height: 200upx;
				flex-shrink: 0;
			}
			text{
				display: block;
				font-size: 26upx;
			}
		}
		.service-content-c{
			padding: 60upx 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #D1D1D1;
			font-size: 28upx;
			view{
				padding:6upx 25upx;
				border-radius: 10upx;
				background-color: #1d7dff;
				color: #FFFFFF;
				&.active{
					opacity: .9;
					transform: scale(.9);
				}
			}
		}
		.saveImage{
			font-size: 30upx;
			width: 280upx;  
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 10upx;
			background-color: #07B906;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 80upx;
		}
	}
</style>